<template>
	<view>
		<view v-if="!item.label">
			<SelectCity :is_port="is_port" :is_register="is_register" v-model="show" @change="confirm"
				:select_city_new="select_city_new" :select_city_newd="[]"></SelectCity>
			<view class="wrapper">
				<!-- <input class="catryStyle" placeholder-style="color: #999999;font-size: 24rpx;" v-model="cityText" -->
				<!-- :custom-style="myStyle" :placeholder="$t(item.placeholder)" disabled @click="show = true" /> -->
				<div class="value">
					{{cityText||item.placeholder}}
				</div>
				<div class="overlay" @click="show = true"></div>
			</view>
		</view>
	</view>
</template>
<script>
	import {
		COUNTRY
	} from '@/config/app';
	import SelectCity from "@/components/page/SelectCityNew.vue"

	export default {
		props: {
			label: {
				type: String,
			},
			texthidden: {
				type: Boolean,
			},
			item: {
				type: Object,
				default: {},
				required: true,
			},
			is_port: {
				type: Boolean,
				default: false,
			},
			select_city_new: {
				type: [Array, Object, null],
				required: false,
				default () {
					return [
						// 初始化对象的属性，确保是有效的默认值
					];
				}
			},
			is_register: {
				type: Number,
				default: 0,
			}
		},
		components: {
			SelectCity,
		},
		data() {
			return {
				myStyle: {
					textAlign: 'left',
					pointerEvents: "none"
				},
				showMask: true,
				labelStyle: {
					'word-break': 'break-all',
				},
				lang: getApp().globalData.lang,
				show: false,
				cityText: '',
				country: "0",
				list: COUNTRY,
				confirmColor: '#2979ff',
				defaultValue: [0, 0, 0],
				searchText: '',
				refresh: 0,
				searchResult: [], //自定义搜索的结果
				// countryList: COUNTRY,
				// provinceList: [],
				// cityList: [],
			};
		},
		mounted() {
			if (this.label) {
				this.cityText = this.label
			}
			console.log('显示');
			this.getList()
		},
		watch: {
			label(){
				this.cityText = this.label
			},
			show(val) {
				if (!val) {
					this.defaultValue = [0, 0, 0];
				}
			},
			select_city_new: {
				immediate: true,
				handler(newData) {
					// 通知grandchild数据更新
					this.$emit('update', newData);
					this.cityText = ''
				}
			}
		},
		methods: {
			// 清空内容
			setCityText() {
				this.cityText = ''
			},
			/* 列发生改变 */
			columnChange(e) {
				this.searchResult = [];
			},
			searchCity(e) {
				// this.defaultValue = [0, 0, 0]
				let params = {
					name: e,
					is_port: '0'
				};
				// if (this.lang === 'ru') {
				// 	params = {
				// 		name_r: e
				// 	};
				// }
				this.showMask = true;
				this.$u.api.basic.getSearchCity(params).then(res => {
					this.showMask = false;
					if (!res) {
						this.$u.toast(this.$t('未查询到数据'))
						return
					}
					this.searchResult = res;
					let c = this.list.filter((item, index) => {
						if (item.value == res[0].id) {
							this.defaultValue[0] = index;
							this.refresh++
							return true
						} else {
							return false
						}
					})[0];
					let s = c?.children.filter((item, index) => {
						if (item.value == res[1].id) {
							this.defaultValue[1] = index;
							this.refresh++
							return true
						} else {
							return false
						}
					})[0];
					let b = s?.children.filter((item, index) => {
						if (item.value == res[2].id) {
							setTimeout(() => {
								this.defaultValue[2] = index;
								this.refresh++
							}, 10)
							return true
						} else {
							return false
						}
					})[0];
				}).catch(() => {
					this.showMask = false;
				})
			},
			districts(val) {
				return val.length > 10 ? val.slice(0, 23) + "...>" : val
			},
			getList() {
				const that = this
				if (that.lang != 'zh') {
					that.country = 1
				}
				if (that.is_port) {
					var json = {
						country: that.country,
						pid: 0,
						is_port: true,
						lang: that.lang
					}
				} else {
					var json = {
						country: that.country,
						pid: 0,
						lang: that.lang
					}
				}

				this.$u.api.basic.getSelectCityList(json).then(res => {
					that.showMask = false;
					that.list = res
					console.log(res)
					if (res) {
						this.$emit('zzc', 1)
					}
					if (that.item.value.city) {
						that.mapDetails(res)
					}
				}).catch(err => {
					that.showMask = false;
				})
			},
			confirm(e) {
				this.cityText = ''
				this.cityText = e.map(item => item.label).join(",");
				// let arr = this.cityText.split(",")
				// this.cityText = arr[arr.length-1]
				let result = e;
				if (this.searchResult.length > 0) {
					this.cityText = this.searchResult.map(item => item[this.$t("item.name")]).join(",");
					result = this.searchResult.map(item => {
						return {
							label: item[this.$t("item.name")],
							value: item.id
						}
					})
				}
				this.searchText = '';
				this.searchResult = [];
				this.$emit('change', this.item.key, result)
			},
			mapDetails(res) {
				// 默认显示，取各级对应下标
				let value = this.item.value
				let country = value.country
				let province = value.province
				let city = value.city
				let value1 = 0 // 国家下标
				let value2 = 0 // 省下标
				let value3 = 0 // 市下标
				if (country === "1") {
					value1 = 1
				}
				let children1 = res[value1].children
				let children2 = []
				for (let i in children1) {
					if (children1[i].value === province) {
						value2 = parseInt(i)
						children2 = children1[i].children
					}
				}
				for (let j in children2) {
					if (children2[j].value === city) {
						value3 = parseInt(j)
					}
				}
				this.defaultValue = [value1, value2, value3]
				const lang = uni.getStorageSync('lang')
				if (lang === 'ru') {
					this.cityText = value.mergename_ru
					console.log('cityText:', this.cityText);
				} else {
					console.log('cityText:', this.cityText);
					this.cityText = value.mergename
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.value {
		color: #3d3d3d;
		font-size: 24rpx;
	}

	.wrapper {
		position: relative;
	}

	.overlay {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		cursor: pointer;
	}

	.catryStyle {
		text-align: end;
		z-index: 99999;
		width: 200rpx;
		font-size: 24rpx;
		color: #000000;
		// text-align: center;
		text-overflow: ellipsis;
		overflow: hidden;
		word-break: break-all;
		white-space: nowrap;
	}

	.citySearchInput {
		margin: 0 auto;
		width: 90%;
	}

	.warp {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100%;
	}
</style>